<template>
	<view class="invoice-layout">
		<uv-navbar title="我要开票" :placeholder="true" :titleStyle="{fontSize:'18px'}" autoBack>
			<template #right>
				<image class="nav-icon" :src="channelStore.channelTypeRedIcon" mode="aspectFit"></image>
			</template>
		</uv-navbar>
		<view class="invoice-container">
			<view class="invoice-balance">
				<text>发票余额(元)：</text>
				<text>{{invoiceBillBalance}}</text>
			</view>
			<xh-input title="发票录入" showTitle isSelect placeholder="" @didSelect="createInvoice"></xh-input>
			<xh-input title="开票订单" showTitle isSelect placeholder="" @didSelect="showInvoiceRecord"></xh-input>
			<xh-input title="开票信息及邮寄地址" showTitle isSelect placeholder="" @didSelect="showInvoiceInfo"></xh-input>
			<view class="invoice-header">开票认证</view>
			<view class="invoice-auth-box" @tap="showAuth">
				<view class="invoice-auth-top">
					<text class="invoice-auth-top-title">{{dataInfo.companyName}}</text>
					<view class="invoice-auth-top-right" v-if="dataInfo.status != '1'">
						<text>{{authInfo.statusText}}</text>
						<xh-icon icon="icon_jiantou" color="#ff0200"></xh-icon>
					</view>
				</view>
				<view class="invoice-auth-bottom" :style="{color:authInfo.tipTextColor}">{{authInfo.tipText}}</view>
			</view>
			<view class="invoice-auth-tip">{{authInfo.msg}}</view>
		</view>
		<xh-alert ref="alertRef" @submit="alertResult"></xh-alert>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { useChannelStore } from '@/common/stores'
	import { getInvoiceAuthInfo, getWalletsInfo } from '@/common/api/api.js'
	import { computed, ref } from 'vue'

	const channelStore = useChannelStore()
	//发票余额
	const invoiceBillBalance = ref(0)
	//开票认证信息
	const dataInfo = ref({})
	const alertRef = ref(null)
	const authInfo = computed(()=>{
		let params = {}
		if(dataInfo.value.taxType){
			params.tipText = `${dataInfo.value.taxType}(税率${dataInfo.value.rate}%)`
			params.tipTextColor = '#1890FF'
			params.msg = '温馨提示：如信息有误，请联系客服修改'
		}
		else{
			params.tipText = '需完成认证，才能正常对公结算'
			params.tipTextColor = '#909399'
			params.msg = '温馨提示：对公结算需完成开票认证，才可正常提现'
		}
		if(dataInfo.value.status == '0') {
			params.statusText = '审核中'
		}
		else if (dataInfo.value.status == '1') {
			params.statusText = ''
		}
		else{
			params.statusText = '马上认证'
		}
		return params
	})
	
	// 开票认证
	const showAuth = () => {
		if(dataInfo.value.status == '0' || dataInfo.value.status == '1'){
			return
		}
		const data = encodeURIComponent(JSON.stringify(dataInfo.value))
		uni.navigateTo({
			url: `/pages/my/invoice/invoice-auth/invoice-auth?data=${data}`
		})
	}
	// 开票信息
	const showInvoiceInfo = () => {
		uni.navigateTo({
			url: '/pages/my/invoice/invoice-info/invoice-info'
		})
	}
	// 开票录入
	const createInvoice = () => {
		if(dataInfo.value.status == '1') {
			uni.navigateTo({
				url: '/pages/my/invoice/create-invoice/create-invoice'
			})
		}
		else if(dataInfo.value.status == '0') {
			uni.$utils.showToast('认证审核中')
			return
		}
		else{
			alertRef.value.open({title:'开票认证',content:'需要完成开票认证，才可进行发票录入',okText:'去认证'})
		}
	}
	// 去认证
	const alertResult = (res)=>{
		showAuth()
	}
	// 开票订单
	const showInvoiceRecord = () => {
		uni.navigateTo({
			url: '/pages/my/invoice/invoice-record/invoice-record'
		})
	}
	//查询开票信息
	const queryData = () => {
		Promise.all([
			getInvoiceAuthInfoData(),
			getInvoiceBalance()
		])
	}
	// 获取发票余额
	const getInvoiceBalance = async () => {
		const res = await getWalletsInfo()
		invoiceBillBalance.value = res.result.invoiceBillBalance
	}
	// 获取开票认证信息
	const getInvoiceAuthInfoData = async () => {
		const res = await getInvoiceAuthInfo()
		dataInfo.value = res.result
	}
	onShow(() => {
		queryData()
	})
</script>

<style lang="scss" scoped>
	.invoice-layout {
		.nav-icon {
			width: 128rpx;
			height: 56rpx;
		}

		.invoice-container {
			.invoice-balance {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx;
				text:nth-child(2){
					color: $xh-red-color;
				}
			}

			.invoice-header {
				padding: 30rpx;
				color: $xh-color-9;
			}

			.invoice-auth-box {
				background-color: #fff;
				padding: 30rpx;

				.invoice-auth-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.invoice-auth-top-title {
						font-weight: bold;
					}

					.invoice-auth-top-right {
						display: flex;
						align-items: center;
						color: $xh-red-color;
						font-size: 26rpx;
					}
				}

				.invoice-auth-bottom {
					color: $xh-color-9;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}

			.invoice-auth-tip {
				color: $xh-red-color;
				font-size: 24rpx;
				padding: 30rpx;
			}
		}
	}
</style>